<template>

    <el-menu
    background-color="#fff"
    text-color="#3e6174"
    active-text-color="#3e6174"
    :default-active="route.path"
    class="el-menu-vertical"
    :router="true"
    >
        <div class="logo">社区防疫管理系统</div>
        <el-sub-menu index="1">
            <template #title>
            <i class="fa fa-building-o fa-lg"></i>&nbsp;&nbsp;
            <span>社区人员管理</span>
            </template>
            <el-menu-item index="/communitypersonnel">
                <el-icon><Lock /></el-icon>
                <span>社区人员信息</span>
            </el-menu-item>
            <el-menu-item index="/personneladd">
                <el-icon><Document /></el-icon>
                <span>添加社区人员</span>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
            <i class="fa fa-user-o fa-lg"></i>&nbsp;&nbsp;
            <span>报备人员管理</span>
            </template>
            <el-menu-item index="/filing">
                <el-icon><Lock /></el-icon>
                <span>报备人员信息</span>
            </el-menu-item>
            <el-menu-item index="/filingadd">
                <el-icon><Document /></el-icon>
                <span>添加报备人员</span>
            </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/material">
            <i class="fa fa-bar-chart fa-lg"></i>&nbsp;&nbsp;
            <span>物资管理</span>
        </el-menu-item>
        <el-sub-menu index="4">
            <template #title>
            <i class="fa fa-envelope-open-o fa-lg"></i>&nbsp;&nbsp;
            <span>通知管理</span>
            </template>
            <el-menu-item index="/notice">
                <el-icon><Lock /></el-icon>
                <span>通知列表</span>
            </el-menu-item>
            <el-menu-item index="/noticeadd">
                <el-icon><Document /></el-icon>
                <span>添加通知</span>
            </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
            <template #title>
            <i class="fa fa-laptop fa-lg"></i>&nbsp;&nbsp;
            <span>员工管理</span>
            </template>
            <el-menu-item index="/changepassword">
                <el-icon><Lock /></el-icon>
                <span>修改密码</span>
            </el-menu-item>
            <el-menu-item index="/staffinfo">
                <el-icon><Document /></el-icon>
                <span>员工信息</span>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>


<script setup>
import { useRoute } from 'vue-router'
const route = useRoute();

</script>

<style>
.el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px; 
    height: 100vh;
}
.el-menu-item:hover {
    background-color: #e6e6e6 !important;
    color: #5e7b85;
}
.el-menu-item.is-active {
   background-color: #c5c3c3db !important;
}
.el-menu-item{
    height: 45px !important;
}
.logo{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    height: 60px;
    line-height:60px;
    background-color: #fff;
    color: #484848;
}
span{
    font-size: 16px;
}
</style>

